<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'上传'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "0">
        <div class="clearfix">
            <div class="col-md-4">
                <rx-upload
                    :data="{id: 11}"
                    :init="{class: 1, mime: 1}"
                    :elStyle="{width:'140px', height: '170px'}"
                    @success="successUpload">
                    <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                        <a href="javascript:">
                            <span type="file" value="" class="file"></span>
                            <em class="bgIcon file-ico"></em>
                        </a>
                    </div>
                </rx-upload>
            </div>
            <div class="col-md-8">
                <!-- 部门选择配置 -->
                <div class="col-md-6">
                    <h4 class="mb5">1. 部门选择配置</h4>
                    <el-select v-model="one" placeholder="选择部门配置">
                        <el-option
                            v-for="(value, key, index) of remarks.remarks"
                            :key="index"
                            :label="value"
                            :value="key">
                            <span style="float: left">{{ value }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ key }}</span>
                        </el-option>
                    </el-select>
                </div>
                <!-- class分类配置 -->
                <div class="col-md-6">
                    <h4 class="mb5">2. class 分类配置</h4>
                    <el-select v-model="two" placeholder="选择上传分类">
                        <el-option
                            v-for="(value, key, index) of remarks[one]"
                            :key="index + 'class'"
                            :label="value"
                            :value="key">
                            <span style="float: left">{{ value }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ key }}</span>
                        </el-option>
                    </el-select>
                </div>
                <!-- mime 类型配置 -->
                <div class="col-md-6">
                    <h4 class="mb5">3. mime 类型配置</h4>
                    <el-select v-model="three" placeholder="选择上传类型">
                        <el-option
                            v-for="(value, key, index) of remarks.secondLevel"
                            :key="index + 'mime'"
                            :label="value"
                            :value="key">
                            <span style="float: left">{{ value }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ key }}</span>
                        </el-option>
                    </el-select>
                </div>
                <!-- multi 限制上传个数 -->
                <div class="col-md-6">
                    <h4 class="mb5">4. multi 是否允许上传多张</h4>
                    <el-select v-model="four" placeholder="是否允许上传多张">
                        <el-option
                            label="否"
                            :value="0">
                            <span style="float: left">否</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">false</span>
                        </el-option>
                        <el-option
                            label="是"
                            :value="1">
                            <span style="float: left">是</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">true</span>
                        </el-option>
                    </el-select>
                </div>
                <div><input @click="createInit()" type="button" class="uiBtn-small uiBtn-blue mt5" value="生成init配置"></div>
                <div class="cRed fz14 mt10">{{text}}</div>
            </div>
        </div>
        <codemd url="Lesson2/docs/upload.md"></codemd>
        <h3 class="mb10 mt10">参数配置</h3>
        <table class="uiTable">
            <tr>
                <th>参数</th>
                <th>说明</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</div>
</template>
<script>
import codemd from '../code-md'
import config from '../../../../../packages/upload/config'
export default {
    components: {
        codemd
    },
    data () {
        return {
            remarks: config.remarks,
            one: '',
            two: '',
            three: '',
            four: '',
            text: ''
        }
    },
    mounted () {

    },
    methods: {
        successUpload (value) {
            // do what ...
            console.log(value)
            /**
             * data: {id: 11}
             * init: {class: 1, mime: 1}
             * src: "https://rxjy-test.oss-cn-beijing.aliyuncs.com/ProjectBusiness/Images/1562402405N9k4EByCdHMAx4hBzbwxd2Nr.jpg"
             */
        },
        createInit () {
            if (this.one === '') {
                layer.msg('部门id为选择')
                return false
            }
            if (this.two === '') {
                layer.msg('分类配置为选择')
                return false
            }
            if (this.three === '') {
                layer.msg('类型配置未选择')
                return false
            }
            if (this.four === '') {
                layer.msg('未选择上传个数限制')
                return false
            }
            this.text = {
                class: this.two,
                mime: this.three,
                multi: Boolean(this.four)
            }
        }
    }
}
</script>
